<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css"/>
		<style>
			#dd{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<button class="btn btn-danger btn-sm" onclick="fun();">删除</button>
	<button class="btn btn-danger btn-lg"
	 data-toggle="modal"
	 data-target=".modal"
	>删除</button>
	<a  href="#myModal" 
	 data-toggle="modal"
	 class="btn btn-danger btn-sm">删除</a>
	 <div id="dd"></div>
	 
	
	<body>
		<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
		  <div class="modal-dialog modal-sm" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">删除用户</h4>
		      </div>
		      <div class="modal-body">
		        <img src="../demo1/images/01.jpg">
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary">删除</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
      <script src="../js/jquery-1.12.4.js"></script>
	  <script src="../js/bootstrap.min.js"></script>	
	  <script type="text/javascript">
	  	 //$(".modal").modal();
		 
		 function fun(){
			 //弹出模态框
			 //$(".modal").modal({'keyboard':false,'backdrop':false});
		 
		     //$(".modal").modal('toggle');
		 }
		 
		 //模态框隐藏后改变DIV的背景颜色
		 $(".modal").on('hidden.bs.modal',function(){
			 $("#dd").css({'background':'green'})
		 });
	  </script>		
	</body>
</html>
